<template>
  <div class="container">
    <van-tabs v-model="active">
      <van-tab v-for="item,index in navs" :title="item" :key="index">
      <div class="list">
      	  <div class="item flex flex-col  bg-white mg-t" v-for="i in 10">
        <div class="pd bd-bottom">
        	<div class="flex-row">
        		<div class="flex-grow-1">订单编号：123456566</div>
        		<div class="flex-grow-0 moneyColor">剩余租期0天</div>
        	</div>
        	<div class="">租赁期从：2018年3月10日，共5天</div>
        </div>
        	<div class="flex-row pd">
        		<img class="userpic flex-grow-0 mg-r" src="@/assets/images/3.jpg">
        		<div class="info flex-grow-1 flex-col">
        			<div class="flex-row">
        				<div class="flex-grow-1">LV婚纱礼服</div>
        				<div class="flex-grow-0">租金：￥150</div>
        			</div>
        			<div class="flex-row">
        				<div class="flex-grow-1">状态：<span class="moneyColor">交易完成</span></div>
        				<div class="flex-grow-0">押金：￥200</div>
        			</div>
        			<div class="subtit">颜色：黑色</div>
        			<div class="subtit">尺码：M</div>
        		</div>
        	</div>
        	<div class="flex-end pd-b bd-bottom">共计商品1件 合计：￥350.00(含运费0.00)</div>
        	<div class="flex btn-group flex-end pd">
	        	<van-button size="small">小型按钮</van-button>
	        	<van-button size="small">再次下单</van-button>
	        	<van-button size="small">退款售后</van-button>
        	</div>
        </div>
      </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
	export default({
		data(){
			return{
				active:1,
				navs:["待付款","待发货","待收货","已完成"]
			}
		}
	})
</script>
<style scoped lang="less">
.list{
	position:fixed;
	top:44px;
	bottom:0;
	left:0;
	width:100%;
	overflow-x: hidden;
    overflow-y: croll;
}
.van-tab--active {
  color: #F75B93;
}
.item{
	font-size:.5rem;
	img{
		width:3rem;
		height:3rem;
	}
}
.van-tabs__line {
  background-color: #F75B93;
}
.btn-group{
	display: flex;
	justify-content:flex-end;
}
.van-button--small{
	font-size: .5rem;
	margin-left:.3rem;
}
.pd{
	padding:.3rem;
}
.pd-b{
	padding-bottom:.3rem;
}
</style>
